<template>
    <!-- 影院详情 -->
    <div class="cinema-detail">
      <!-- 头部 -->
      <cinemaHeader />
      <!-- Swiper -->
      <cinemaSwiper
        v-if="films.length"
        :films="films"
        :filmIndex="currentFilmIndex"
        @changeFilm="changeFilm"
      />
      <!-- 日期切换 -->
      <dataSelect
        v-if="films.length && films[currentFilmIndex].showDate"
        :showDates="films[currentFilmIndex].showDate"
      />
    </div>
  </template>
  
  <script>
  // 引入子组件
  import cinemaHeader from "@/pages/cinemas/data-list/cinema-header.vue";
  import cinemaSwiper from "@/pages/cinemas/data-list/cinema-swiper.vue";
  import dataSelect from "@/pages/cinemas/data-list/cinema-date-select.vue";
  export default {
    // 注册组件
    components: {
      cinemaHeader,
      cinemaSwiper,
      dataSelect,
    },
    data() {
      return {
        films: [],
        currentFilmIndex: 0,
      };
    },
    created() {
      this.getFilms();
    },
    computed: {
      // showDate() {
      //   return this.films[this.currentFilmIndex].showDate;
      // },
    },
    methods: {
      // 获取电影数据-- 轮播图
      async getFilms() {
        let res = await this.$api({
          headers: {
            "X-host": "mall.film-ticket.film.cinema-show-film",
          },
          url: "https://m.maizuo.com/gateway",
          method: "get",
          params: {
            cinemaId: this.$route.params.cinemaId,
            k: 5689571,
          },
        });
        this.films = res.data.data.films;
        this.getCurrentFilmIndex();
      },
      changeFilm(index) {
        this.currentFilmIndex = index;
      },
      getCurrentFilmIndex() {
        let filmId = this.$route.params.filmId;
        let targetIndex = this.films.findIndex((item) => item.filmId == filmId);
        targetIndex > 0 ? this.changeFilm(targetIndex) : "";
      },
    },
  };
  </script>
  
  <style scoped>
  .cinema-detail {
    background: #fff;
  }
  </style>